<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <!-- 页面主体内容，这里可以添加其他元素，比如网站介绍等 -->
    <div class="main-content">
        <h1>欢迎来到我们的网站</h1>
        <p>请登录以享受更多服务和功能。</p>
        <button id="login-btn">点击登录</button>
    </div>

    <!-- 登录弹窗 -->
    <div id="login-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>登录</h2>
            <div class="tab-container">
                <!-- 手机登录标签页 -->
                <div id="phone-tab" class="tab active">
                    <div class="input-group">
                        <label for="phone">手机号：</label>
                        <input type="text" id="phone" placeholder="请输入手机号" required>
                    </div>
                    <div class="input-group">
                        <label for="phone-code">验证码：</label>
                        <input type="text" id="phone-code" placeholder="请输入验证码" required>
                    </div>
                    <button id="phone-login" class="login-btn">手机号登录</button>
                    <div id="phone-error" class="error-message"></div>
                </div>
                <!-- 密码登录标签页 -->
                <div id="password-tab" class="tab">
                    <div class="input-group">
                        <label for="username">用户名：</label>
                        <input type="text" id="username" placeholder="请输入用户名" required>
                    </div>
                    <div class="input-group">
                        <label for="password">密码：</label>
                        <input type="password" id="password" placeholder="请输入密码" required>
                    </div>
                    <button id="password-login" class="login-btn">密码登录</button>
                    <div id="password-error" class="error-message"></div>
                </div>
                <!-- 其他方式登录标签页 -->
                <div id="other-tab" class="tab">
                    <button id="wechat-login" class="social-login-btn">微信登录</button>
                    <button id="qq-login" class="social-login-btn">QQ 登录</button>
                </div>
            </div>
            <div class="tab-buttons">
                <button class="tab-button active" data-tab="phone-tab">手机号</button>
                <button class="tab-button" data-tab="password-tab">密码</button>
                <button class="tab-button" data-tab="other-tab">其他方式</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>